<template>
    <div class="table">
        <div class="container">
            <div class="handle-box">
                <el-button type="primary" style="float: right;" icon="el-icon-plus" @click="addNotice">新建小区</el-button>
                <div style="clear: both;"></div>
            </div>
            <el-table :data="tableData" border class="table" ref="multipleTable" style="width: 100%; margin-top: 20px">
                <el-table-column prop="name" label="小区名称"></el-table-column>
                <el-table-column label="小区名称">
                    <template slot-scope="scope">
                        <span>{{scope.row.province+' '+scope.row.city+' '+scope.row.area}}</span>
                    </template>
                </el-table-column>
                <el-table-column label="小区简介">
                    <template slot-scope="scope">
                        <span>{{scope.row.introduction.substr(0,10)+'...'}}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="create_time" label="创建时间" sortable></el-table-column>
                <el-table-column prop="create_user_name" label="创建人"></el-table-column>
                <el-table-column label="是否删除">
                    <template slot-scope="scope">
                        <span>{{scope.row.is_delete==1?'是':'否'}}</span>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="150" align="center" fixed="right">
                    <template slot-scope="scope">
                        <el-button type="text" icon="el-icon-view" v-if="scope.row.state!=1" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                        <el-button type="text" icon="el-icon-delete" style="color: red;" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!--<div class="pagination">-->
            <!--<el-pagination background @current-change="handleCurrentChange" layout="prev, pager, next" :total="1000">-->
            <!--</el-pagination>-->
            <!--</div>-->
            <div class="block">
                <span class="demonstration"></span>
                <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page.sync="currentPage1"
                    :page-size="pageSize"
                    layout="total, prev, pager, next"
                    :total="totalRow">
                </el-pagination>
            </div>
        </div>
        <!-- 编辑弹出框 -->
        <el-dialog title="消息编辑" :visible.sync="editVisible" width="80%" top="1%">
            <areaAdd v-if="editVisible" :uid="roleId" ref="areaAdd" @done="roleDone"></areaAdd>
        </el-dialog>
    </div>
</template>

<script>
    import areaAdd from '@/components/area/area-add'
    import pub from '../../utils/pub'
    export default {
        components:{
            areaAdd,
        },
        name: 'notice',
        data() {
            return {
                tableData:[],
                pageSize: 0,
                totalRow: 0,
                currentPage1: 0,
                nid: '',

                editVisible:false,
            }
        },
        mounted(){
            this.getGoodsData(1);
        },
        filters:{
            stateFilter(value){
                let str = '';
                if(value==='0'){
                    str = '待发布';
                }
                if(value==='1'){
                    str = '审核中';
                }
                if(value==='2'){
                    str = '下架';
                }
                if(value==='3'){
                    str = '上架';
                }
                if(value==='4'){
                    str = '禁用';
                }
                if(value==='5'){
                    str = '删除';
                }
                if(value==='6'){
                    str = '审核不通过';
                }
                return str;
            },
            getCurrentTime(value){
                return pub.getCurrentTime(value);
            },
        },
        methods:{
            loadopen() {
                this.loading = this.$loading({
                    lock: true,
                    text: 'Loading',
                    spinner: 'el-icon-loading',
                    background: 'rgba(0, 0, 0, 0.2)'
                });
                setTimeout(() => {this.loading.close();}, 5000);
            },
            loadclose() {
                this.loading.close();
            },
            // 分页获取列表
            getGoodsData(start){
                this.loadopen();
                this.config.get('/manager/housinggestate/housinggestate/findPage', {
                    pageNum: start?start:1,
                }).then(res=>{
                    this.loadclose();
                    if(res.data.code==='0'){
                        this.tableData = res.data.page.list;
                        this.pageSize = res.data.page.pageSize;
                        this.totalRow = res.data.page.totalRow;
                        this.currentPage1 = res.data.page.pageNumber;
                        console.log(this.tableData, '哈哈哈')
                    }else {
                        this.$message.error(this.config.handleError(res.data));
                    }
                }).catch(err=>{
                    this.loadclose();
                    this.$message.error('网络错误');
                    this.$router.push('/login');
                })
            },
            // 改变pageSize
            handleSizeChange(){},
            // 改变currentPage
            handleCurrentChange(val){
                this.getGoodsData(val);
            },
            // 添加/编辑完成（子组件调用此方法）
            roleDone(str) {
                this.editVisible = false;
                this.getGoodsData(1);
            },
            // 新建消息
            addNotice(){
                this.editVisible = true;
                this.roleId = '';
            },
            // 编辑
            handleEdit(index, row){
                this.editVisible = true;
                this.roleId = row.id;
                setTimeout(()=>{
                    this.$refs.areaAdd.getInfo();
                }, 200);
            },
            // 删除
            handleDelete(index, row){
                this.$confirm('确定删除该消息?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.loadopen();
                    this.config.post('/manager/housinggestate/housinggestate/delete', {id: row.id}).then(res=>{
                        this.loadclose();
                        if(res.data.code==='0'){
                            this.$message.success(res.data.message);
                            this.getGoodsData();
                        }else {
                            this.$message.error(this.config.handleError(res.data));
                        }
                    });
                }).catch(() => {
                });
            },
            // 返回项目
            backProject(){
                this.$router.push('/module2/project');
            }
        }
    }

</script>

<style scoped lang="less">
    .handle-box {
        margin-bottom: 20px;
    }
    .table{
        width: 100%;
        font-size: 14px;
    }
    .el-switch .el-switch__core{
        width: 40px; border-color:#ccc; background:#ccc;
    }
    .el-switch.is-checked .el-switch__core{
        width: 40px; border-color:#409eff; background:#409eff;
    }
    .projectTable{
        width: 100%;
        height: 3rem;
        overflow-y: hidden;
        transition: height 0.3s linear;
        tr{
            width: 100%;
            td{
                padding: 0 1rem;
                text-align: center;
            }
        }
    }
    .projectTable.show{
        overflow-y: scroll;
        height: 200px;
    }
</style>
